<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-row>
      <van-col span="4">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="item in ju"
            :key="item.id"
            @click="aa(item.id)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="20">
        <van-card
          v-for="item in fen"
          :key="item.id"
          :num="item.sort_order"
          :price="item.retail_price"
          :desc="item.goods_brief"
          :title="item.name"
          :thumb="item.list_pic_url"
          @click="detail(item.id)"
        />
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      ju: [],
      fen: [],
    };
  },
  mounted() {
    this.$http(
      "//shop.bufantec.com/bufan/category/categoryNav?id=1005000",
      "get"
    ).then((res) => {
      console.log(res);
      this.ju = res.data.navData;
    });

    this.$http(
      "//shop.bufantec.com/bufan/goods/goodsList?categoryId=1005000",
      "get",
      {}
    ).then((res) => {
      console.log(res);
      this.fen = res.data.data;
    });
  },
  methods: {
    aa(id) {
      this.$http(
        "//shop.bufantec.com/bufan/goods/goodsList?",
        "get",
        {},
        { categoryId: id }
      ).then((res) => {
        console.log(res);
        this.fen = res.data.data;
      });
    },

    detail(id) {
      this.$router.push({ path: "/data", query: { id } });
    },
    onClickLeft() {
      this.$router.go(-1); 
    },
  },
};
</script>

<style lang="scss"></style>
